import React, { Component } from 'react';
import { time,fromNow} from '../../utils'
import { Badge,Icon,Tooltip,Popover,Tag} from 'antd';
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import './item.less'

function mapStateToProps (state) {
    let {userId} = state.user;
    return {
        currentUserId:userId
    }
}
@connect(mapStateToProps)
export default class CommentItem extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    handleReply = (data, event) => {
        var cId = this.props.commentData._id;
        this.props.handleReply(data,cId,event)
    }
    handleLike = (id, event)=>{
        this.props.handleLike(id)
    }
    handleRemove = (id) => {
        this.props.handleRemove(id)
    }
    render() {
        let {commentData,authorId,currentUserId,actions } = this.props;
        const userCard = (user) => {
            return (
                <div className="user_card clearfix">
                    <div className="user_avatar">
                        <img src={user.avatar} alt="" />
                    </div>
                    <div className="names">
                        <h1 className="username">{user.username}</h1>
                        <p className="join_time">加入于{time(user.create_time)}</p>
                    </div>
                    <ul className="user_controls">
                        <li></li>
                    </ul>
                </div>
            )    
        };
        const actionDom = (item)=>{
            return (
                <div className="">
                    <div className="CommentItemV2-action">
                        <button type="button" className="btn btn-text"
                            onClick={(event) => this.handleLike(item._id,event)}>点赞 {item.like_count>0?item.like_count:null}</button>
                        <button type="button" className="CommentItemV2-hoverBtn btn btn-text" 
                        onClick={(event) => this.handleReply(item,event)}>回复</button>
                        {currentUserId === item.from._id ? (<button type="button" 
                        className="CommentItemV2-hoverBtn btn btn-text"
                         onClick={() => { this.handleRemove(item._id) }}>删除</button>):null}
                    </div>
                </div>
            )
        }
        
        const Item = (data,type)=>{
            return (
                <li className={type?'NestComment--child':'NestComment--rootComment'} key={data.id}>
                    <div className="CommentItemV2">
                        <div className="CommentItemV2-meta">
                            <span className="UserLink CommentItemV2-avatar">
                                <a>
                                    <img className="Avatar UserLink-avatar" width="30" height="30" 
                                    src={data.from.avatar}
                                    alt={data.from.username}/>
                                </a>
                            </span>
                            <span className="UserLink">
                                <a className="UserLink-link"  target="_blank" href="//www.zhihu.com/people/xiao-cheng-yi-bei-ye-wei-liang-97">
                                    {data.from.username}
                                </a>
                            </span>
                            {data.from._id===authorId?(
                                <span className="CommentItemV2-roleInfo"> (作者) </span>
                            ):''}
                            {
                                data.to? (
                                    <span>
                                       <span className="CommentItemV2-reply">回复</span>
                                       <span className="UserLink">
                                            <a className="UserLink-link"  target="_blank" href="//www.zhihu.com/people/xiao-cheng-yi-bei-ye-wei-liang-97">
                                                {data.to.username}
                                            </a>
                                        </span>
                                        {data.to._id===authorId?(
                                            <span className="CommentItemV2-roleInfo"> (作者) </span>
                                        ):''}
                                    </span>
                                ):'' 
                            }
                            <span className="CommentItemV2-time">{fromNow(data.create_time, 'YYYY-MM-DD HH:mm:ss')}</span>
                        </div>
                        <div className="CommentItemV2-metaSibling">
                            <div className="CommentRichText">
                                <div className="RichText ztext">
                                    <p>
                                        {data.content}
                                    </p>
                                </div>
                            </div>
                            <div className="CommentItemV2-footer">
                                {actionDom(data)}
                            </div>
                        </div>
                    </div>
                </li>
            )
        }

        return (
            <ul className="NestComment">
                {Item(commentData)}
                {/* 回复 */}
                { (commentData.reply && commentData.reply.length > 0) ?(
                    commentData.reply.map((item, i) => {
                        return (
                            Item(item,'reply')
                        )
                    })
                    
                ):''}
                { (commentData.reply && commentData.reply.length > 0) ?(
                    <div className="CommentMoreReplyButton">
                        <button type="button" className="btn btn-text">展开其他 1 条回复</button>
                    </div>
                ):''}
            </ul>
        )    
    }
}